<template>
    <div class="section-header">
        <span class="title">{{ title }}</span>
        <div class="line"></div>
        <span class="number">{{ number }}</span>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    title: string;
    number: string | number;
}>();
</script>

<style scoped>
.section-header {
    display: flex;
    align-items: baseline;
    width: 100%;
    color: #e0e0e0;
    font-weight: bold;
    font-style: italic;
    margin: 40px 0;
}

.title {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

.line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(to right, #2c2c2c 10%, transparent 90%);
    margin: 0 10px;
    border-bottom: 2px dotted #2c2c2c;
}

.number {
    font-size: 26px;
    opacity: 0.3;
}
</style>